<template>
  <div class="role-container">
    <div class="search-container" v-role="'A020201002'">
      <a-card class="role-container-card top" :bordered="false">
        <a-space>
          <a-input-search
            v-model="searchForm.name"
            :style="{ width: '272px', height: '32px' }"
            placeholder="角色"
            allow-clear
            @keydown.enter="search"
          />
        </a-space>
        <div class="search-button">
          <a-button :style="{ marginRight: '16px' }" @click="reset">重 置</a-button>
          <a-button type="primary" @click="search">查 询</a-button>
        </div>
      </a-card>
    </div>

    <div class="container-table">
      <a-card class="role-container-card" :bordered="false">
        <div class="table-header">
          <div class="header-title">角色列表</div>
          <a-button type="primary" @click="handeleAddRoleClick" v-role="'A020201003'">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新建角色</template>
          </a-button>
        </div>
        <Table
          v-role="'A020201001'"
          class="role-list"
          :columns="columns"
          :data="data"
          :total="total"
          :current="searchForm.page"
          :pageSize="searchForm.pageSize"
          :showPageSize="true"
          :scroll="scroll"
          :scrollbar="true"
          :table-layout-fixed="true"
          @handle-size-change="handleSizeChange"
          @handle-current-size-change="handlePageSizeChange"
        >
          <!-- 数据单元格处理 -->
          <!-- 序号 -->
          <template #index="{ rowIndex }">
            <span>{{ rowIndex + 1 }}</span>
          </template>
          <!-- 角色名称 -->
          <template #company="{ record }">
            <span>{{ record.length !== 0 ? record?.company?.name : "-" }}</span>
          </template>
          <!-- 角色状态 -->
          <template #status="{ record }">
            <div>
              <a-switch
                v-model="record.status"
                :checked-value="1"
                :unchecked-value="0"
                @change="handleRoleStatus(record)"
              >
                <template #checked>开</template>
                <template #unchecked>关</template>
              </a-switch>
            </div>
          </template>
          <!-- 操作 -->
          <template #action="{ record }">
            <div>
              <a-button
                v-role="'A020201004'"
                type="text"
                class="action-btn"
                @click="handleQueryRoleClick(record)"
                >查看</a-button
              >
              <a-button
                v-role="'A020201005'"
                type="text"
                class="action-btn"
                @click="handleUpdateRoleClick(record)"
                >编辑</a-button
              >
            </div>
          </template>
        </Table>
      </a-card>
    </div>
    <!-- 角色弹窗 -->
    <Dialog
      class="curd-dialog"
      :visible="addRoleVisibile"
      :title="title"
      :width="780"
      :isForm="true"
      :maskClosable="false"
      :okText="'确认'"
      @update:visible="handleRoleVisible"
    >
      <template v-slot>
        <DialogContent
          :form="addRoleForm"
          :formRef="roleFormRef"
          :disabled="isDisabled"
        />
      </template>
    </Dialog>
    <!-- 二次确认弹窗 -->
    <Dialog
      class="second-confirm"
      :visible="secondVisibile"
      title="提示"
      :width="440"
      :isForm="false"
      :maskClosable="false"
      :okText="'确认'"
      @update:visible="handleSecondVisible"
    >
      <template v-slot>
        <div class="confirm-content">{{ content }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed, provide } from "vue";
import { useRoleStore } from "@/store";
import Table from "@/components/table/index.vue";
import Dialog from "@/components/dialog/index.vue";
import DialogContent from "./components/DialogContent";
import useCompose from "./hooks/useCompose";
const roleStore = useRoleStore();
// 查询和表格相关属性及事件和新增用户修改用户属性及事件
const {
  searchForm,
  reset,
  search,
  columns,
  data,
  scroll,
  total,
  getTableData,
  handleSizeChange,
  handlePageSizeChange,
  addRoleVisibile,
  addRoleForm,
  roleFormRef,
  title,
  isDisabled,
  checkall,
  indeterminate,
  secondVisibile,
  dialogType,
  handeleAddRoleClick,
  handleRoleVisible,
  handleRoleStatus,
  handleUpdateRoleClick,
  handleQueryRoleClick,
  handleSecondVisible,
} = useCompose();
const content = computed(() => {
  let str = "";
  switch (true) {
    case dialogType.value === 1:
      str = "是否取消新增角色？";
      break;
    case dialogType.value === 2:
      str = "是否取消编辑角色？";
      break;
    default:
      str = "";
      break;
  }
  return str;
});
provide("dialogState", {
  addRoleForm,
  checkall,
  indeterminate,
  setCheckVal(val: boolean) {
    checkall.value = val;
  },
  setIndetVal(val: boolean) {
    indeterminate.value = val;
  },
});
onMounted(() => [roleStore.getConfig(), getTableData()]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
